<template>
  <div class="app-portal-body">
    <div class="app-portal-menucontent" v-if="app">
      <mb-tree
        ref="appMbsRef"
        :app-id="app.group_id"
        :selected-id="defaultMbid"
        @select="handleSelectMb"
        style="width:100%;height:100%;"
      />
    </div>
    <div class="app-portal-content">
      <div class="app-portal-cnt-bd" v-if="currentData">
        <mb-options :current-data="currentData" @mb-change="handleChangeMb()"></mb-options>
      </div>
    </div>
  </div>
</template>

<script setup>

import mbTree from '../basic/mb/mb-tree.vue';
import mbOptions from '../basic/mb/mb-options.vue';
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";

const route = useRoute();
const router = useRouter();
const appMbsRef = ref(null)

const props = defineProps({
  app: Object,
})

const currentData = ref(null)
const defaultMbid = ref(null)

onMounted(() => {
  init();
})

const init = () => {
  defaultMbid.value = route.query?.mbid;
}

const handleSelectMb = (data) => {
  currentData.value = data;
  let mbid = data?.id;

  if (mbid) {
    router.push({
      name: 'portal-app-mb',
      params: {
        appId: props.app?.group_id
      },
      query: {
        mbid: mbid
      },
      replace: true
    });
  }
}

const handleChangeMb = () => {
  appMbsRef.value?.init();
}
</script>
